
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title></title>
</head>
<body>

<img id="book"  alt="" width="100" height="123"
  style="background:red;opacity:1;position: relative; left: 500px;" />

<div id="several"></div>

<script type="text/javascript">

var book = document.getElementById('book')
var several = document.getElementById('several');

animate(book, {
	left: 50,
	duration: 2000
})

function animate(elem, options){
	//动画初始值
	var start = 500
	//动画结束值
	var end = options.left

	var createTime = function(){
		return  (+new Date)
	}
	//动画开始时间
	var startTime = createTime();

	var timerId;

	//开始动画
	var startAnim = function() {
		timerId = requestAnimationFrame(tick,15);
	}
	//停止动画
	var stopAnim = function() {
		cancelAnimationFrame(timerId)
	}

	var i = 0;

	function tick(){	
		i++;
		several.innerHTML = 'requestAnimationFrame调用次数:' + i;
		//每次变化的时间
		var remaining = Math.max(0, startTime + options.duration - createTime())
		var temp = remaining / options.duration || 0;
		var percent = 1 - temp;
		var setStyle = function(value){
			elem.style['left'] = value + 'px'
		}
		//移动的距离
		var now = (end - start) * percent + start;
		if(percent === 1){
			setStyle(now)
			stopAnim() ;
		}else{
			setStyle(now)
			startAnim(tick);
		}
	}

	//开始执行动画
	startAnim(tick);
}
</script>
</body>
</html>